import React, { Component } from 'react';
import './App.scss'
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import Item from './components/Item'
import axios from 'axios'
class App extends Component {
  state = {
    list: []
  }
  handleDetele = (id) => {
    const { list } = this.state

    list.forEach(v => {
      v.children = v.children.filter(item => item.id !== id)
    })

    this.setState({
      list: [...list]
    })
  }
  render() {
    const { list } = this.state
    return (
      <div style={{
        width: 1000,
        margin: 'auto'
      }}>
        {
          list.length > 0 && <Swiper
            spaceBetween={50}
            onSlideChange={() => console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
          >
            {
              list.map((v, i) => {
              return (
                  <SwiperSlide key={i}>
                    <div className="list-item">
                      {
                        v.children.map(v => {
                          return <Item {...v} key={v.id} handleDetele={ this.handleDetele }></Item>
                        })
                      }
                    </div>
                  </SwiperSlide>
                )
              })
            }
          </Swiper>
        }

      </div>
    );
  }
  componentDidMount() {
    axios.get('/api/list').then(resp => {
      this.setState({
        list: resp.data.data
      })
    })

  }
}

export default App;
